<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            width: 500px;
            text-align: center;
        }

        table,
        th,
        td {
            border: 1px solid #b7b4b4;
        }

        th {
            background-color: #09c;
            color: white;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th><input type="checkbox" class="ckAll">全选</th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
    </table>

    <script>
        //获取全选框
        const ckall = document.querySelector('.ckAll')
        //获取小选框
        const ck = document.querySelectorAll('.ck')
        // console.log(ck)
        //给全选添加点击事件
        ckall.addEventListener('click', function () {
            // 得到当前大复选框的选中状态
            // console.log(ckall.checked)  // 得到 是 true 或者是 false
            // 遍历所有的小复选框 让小复选框的checked  =  大复选框的 checked
            for (let i = 0; i < ck.length; i++) {
                ck[i].checked = ckall.checked
            }
        })


        for (let i = 0; i < ck.length; i++) {
            ck[i].addEventListener('click', function () {
                const cked = document.querySelectorAll('.ck:checked')
                ckall.checked = cked.length === ck.length
            })
        }
    </script>
</body>

</html>